<script setup lang="ts">
const musicStore = useMusicStore();

const localMusicList = computed(() => musicStore.localMusicList)

function handerSelectMusic() {
  uni.navigateTo({
    url: '/pages/musicselect/index',
  })
}

function handerMusicClear() {
  musicStore.setLocalMusicList([]);
}

/** 播放音乐 */
function playMusic(path: string) {
  // 将本地音乐列表赋值到当前播放列表
  musicStore.setCurrentMusicList(localMusicList.value)
  uni.navigateTo({
    url: `/pages/audiopaly/index?path=${path}`
  });
}
</script>

<template>
  <view class="app-container">

    <view class="select-box">
      <view  class="select-item local-music">本地音乐: {{localMusicList.length}}</view>
      <view class="select-item music-select" @click="handerSelectMusic">选择</view>
      <view class="select-item music-clear" @click="handerMusicClear">清空</view>
    </view>

    <view class="music-list">
      <view
          class="music-item"
          :class="{'music-item-active': item.path === musicStore.currentMusic.path}"
          v-for="item in localMusicList"
          :key="item.path"
          @click="playMusic(item.path)"
      >
        <view class="music-name">{{item.name}}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.app-container{
  .select-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-bottom: 1px;
    border-bottom-color: $uni-border-1;
  }

  .music-list{
    .music-item{
      margin: 20rpx 40rpx;
      .music-name{

      }
    }

    .music-item-active{
      color: $uni-primary;
    }
  }
}
</style>